<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直外边距的重叠问题</title>

    <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 100px; /*设置下外边距为100px*/
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 120px; /*设置上外边距为100px*/
        }

        /*
            垂直外边距的重叠：
                在网页中 [垂直方向] 且 [相邻] 的外边距会发生外边距重叠，所谓的外边距重叠指兄弟元素之间的相邻的外边距会取最大值而不是取和

                所以在box1设置一个下外边距为100px，在box2设置一个上外边距为120px，box1和box2两个元素满足相邻且垂直的条件，所以外边距会是120px

                如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素，如果不想让子元素的外边距设置给父元素，可以为父元素设置一个边框border 或者
                给父元素设置一个内边距即可
        */

        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;

            /*
                不想让子元素的外边距设置给父元素，则给父元素设置一个边框
            */
            /*border: coral solid 1px;*/

            /*
                不想让子元素的外边距设置给父元素，则给父元素设置一个内边距
            */

            /*
                需要注意的是，无论是给父元素设置边框或者设置内边距，都会影响盒子可见框的大小，计算时需要这点
            */
            padding-top: 1px;
        }
        .box4 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

    <div class="box3">
        <div class="box4"></div>
    </div>
</body>
</html>